import { Button, Form, Input, Select, message } from 'antd';
import React from 'react';
import styles from './index.less';
import request from 'umi-request';
import { history, Link } from 'umi';

function Register() {
  const onFinish = (values) => {
    if (values.a_pw !== values.confirm) {
      message.error({
        content: '两次输入的密码不一样',
        key: 'global_key',
        duration: 2,
      });
      return Promise.reject();
    } else {
      console.log(values);
      request
        .post('http://123.60.20.244:8080/atm/account/register', {
          params: values,
        })
        .then((response) => {
          console.log('success:', response);
          if (response.code === 0) {
            message.success({
              content: '注册成功',
              key: 'global_key',
              duration: 2,
            });
            history.push('/');
            return Promise.reject();
          } else if (response.code === 2) {
            message.error({
              content: '用户名已存在',
              key: 'global_key',
              duration: 2,
            });
            return Promise.reject();
          }
        })
        .catch((e) => console.log('fail:', e));
    }
  };

  return (
    <div className={styles.form}>
      <Form onFinish={onFinish}>
        <Form.Item
          name="user_name"
          label="用户名"
          rules={[
            {
              required: true,
              message: '请输入用户名!',
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          name="a_pw"
          label="密码"
          rules={[
            {
              required: true,
              message: '请输入密码',
            },
            {
              pattern: /[0-9]{6}/,
              message: '密码格式错误',
            },
          ]}
          hasFeedback
        >
          <Input.Password />
        </Form.Item>

        <Form.Item
          name="confirm"
          label="确认密码"
          dependencies={['password']}
          hasFeedback
          rules={[
            {
              required: true,
              message: '请再一次输入密码',
            },
          ]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item
          name="u_tel"
          label="电话号码"
          rules={[
            {
              required: true,
              message: '请输入你的电话号码',
            },
            {
              pattern: /[0-9]{11}/,
              message: '请输入正确的电话号码',
            },
          ]}
        >
          <Input style={{ width: '100%' }} />
        </Form.Item>

        <Form.Item
          name="id_number"
          label="身份证号码"
          rules={[
            {
              required: true,
              message: '请输入你的身份证号码',
            },
            {
              pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
              message: '请输入合法的身份证号码',
            },
          ]}
        >
          <Input style={{ width: '100%' }} />
        </Form.Item>

        <Button type="primary" htmlType="submit">
          Register
        </Button>

        <Link to="/" style={{ marginLeft: 30 }}>
          已有账号?现在登录
        </Link>
      </Form>
    </div>
  );
}

export default Register;
